<template>
  <div :style="{ 'background': ground_color  }"
    v-loading="loading"
    element-loading-text="玩命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- # 标题 -->
    <div class="tabbar" :style="{ 'background': background_color  }">
        <span>小小笔记本</span>
        <div class="right_wrappered">
            <router-link class="selection" to="/"><i class="el-icon-s-promotion "></i>首页</router-link>
            <div class="selection img_wrapper">
                <img class="head_img selection" :src="imgUrl" alt="">
                &nbsp;{{ name }}
            </div>
        </div>
    </div>

    <el-tooltip placement="top" content="回到顶部">
      <back-to-top :custom-style="myBackToTopStyle" 
      :visibility-height="200" :back-position="0" transition-name="fade"/>
    </el-tooltip>

    <div class="zhaozi">
        <div class="drop haha_about" :style="{ 'background': background_color,'color': font_color  }">
            <div class="h1_of_about">
                <h1>文章归档</h1>
            </div>
            <div v-cloak v-for="item in artical_list" :key="item.month" class="gujia">
                <h2 style="margin-bottom: 15px;">{{ item.month }}</h2>
                <el-timeline>
                    <el-timeline-item
                        v-for="i in item.list"
                        :key="i.id"
                        color="#04B486" 
                        :timestamp="i.add_time"
                        placement="top">
                        <router-link :to="'/artical/'+i.id">
                            <el-card>
                                <h4>{{ i.title }}</h4>
                            </el-card>
                        </router-link>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>
        <div style="width: 5px; height: 1000px; background: transparent"></div>
    </div>
    
  </div>
</template>

<script>

import { color, host } from '../network/color_check.js';
import Cookies from 'js-cookie';
import Qs from 'qs'
import axios from 'axios';
import  BackToTop from '../../node_modules/element-ui/packages/backtop/index'

export default {
    components: { BackToTop },
    data() {
      return {
        myBackToTopStyle: {
            right: '50px',
            bottom: '50px',
            width: '40px',
            height: '40px',
            borderRadius: '4px',
            lineHeight: '45px', // 请保持与高度一致以垂直居中
            background: '#e7eaf1'// 按钮的背景颜色
        },
        loading: false,
        name: '',
        imgUrl: '',
        ground_color: '#f4f4f4', // 背景色 #f4f4f4是原来的颜色，#22303f是暗黑色, 
        background_color: 'white', // 元素的背景颜色，white, #18222d!important
        font_color: 'black',
        a_color: 'pink',
        tabbar_color: 'pink',
        write_color: '#eff7ff', // #18222d!important

        artical_list: [],
      }
    },
    created() {
        this.loading = true;
        var a = Cookies.get();
        // 遍历cookie的值
        for(let key in a){
            // console.log(key);
            if( a[key] === '1' ) {
                this.name = key;
                break;
            }
        }
        this.imgUrl= '';
        // 获取头像
        if( Cookies.get('img_url') ) {
            this.imgUrl = Cookies.get('img_url');
        } else if (this.name){
            this.$message.error("获取头像失败");
        }
        
        this.ground_color = color.ground_color;
        this.background_color = color.background_color;
        this.font_color = color.font_color;
        this.tabbar_color = color.tabbar_color;
        this.a_color= color.a_color;
        this.write_color = color.write_color;
        this.value = color.value;
        this.getArtical();
        this.loading = false;
    },
    methods: {
        getArtical() {
            // 发送axios请求获取文章类别
            axios({
                url:  host.url+'/artical/articals_filing.htm',
                method: 'get',
            })
            .then(suc =>{
                this.artical_list = suc.data.artical_list;
                this.artical_fenye = this.artical_list.length;
            })
            .catch(fail => {
                this.$message.error("获取文章失败啦..");
            });
        }
    }
}
</script>

<style>
.zhaozi {
    display: flex;
}
[v-cloak] {
    display: none;
}
.el-timeline {
    margin-left: 30px;
}
.h1_of_about {
  margin-top: 20px;
  font-size: 25px;
  margin-left: 20px;
}
.el-card {
  background-color: transparent;
  border: 0px;
  color: #17a2b8!important;;
}
.el-timeline-item__timestamp {
  color: orange;
}
.gujia {
  margin: 20px;
}
.haha_about {
  margin: 0 auto;
  width: 65%;
}
</style>